<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-01-11 18:20:32
-->
<template>
    <div class="album-detail w">
        <AlbumTopInfo :albumDynamic="info.albumDynamic" :isSub="info.isSub" :albuminfo="info.albuminfo"
            @playAllSong="playAllSong"></AlbumTopInfo>
        <!-- 专辑内容 -->
        <div class="singer-works">
            <el-tabs>
                <el-tab-pane label="歌曲列表">
                    <SongTable :songs="info.albumsong"></SongTable>
                </el-tab-pane>

                <el-tab-pane>
                    <template #label>
                        评论<span>({{ info.albumDynamic.commentCount }})</span>
                    </template>
                    <CommentPage :commentType="3" :commentresId="info.albumId"></CommentPage>

                </el-tab-pane>

                <el-tab-pane label="专辑详情">
                    <div class="album-desc">
                        <p v-if="info.albuminfo.description">{{ info.albuminfo.description }}</p>
                        <e-empty v-else description="暂无介绍" :image-size="200"></e-empty>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getAlbumSongs, getAlbumDynamic, subAlbum } from '@/api/albumdetail/albumdetail.js'
import AlbumTopInfo from '@/views/albumdetail/children/AlbumTopInfo.vue'
import SongTable from '../../components/SongTable.vue'
import CommentPage from '../../components/content/comment/CommentPage.vue'
import { useMusicStore } from '@/store/music.js'
import { getSongUrl } from '@/api/playmusic/playmusic.js'
let music = useMusicStore()
const route = useRoute()
const info = reactive({
    albumId: '', //专辑id
    albumsong: [],  //专辑拥有的歌曲
    albuminfo: {}, //专辑相关信息
    isSub: false, //是否收藏
    albumDynamic: {}, //专辑动态信息
})

//获取专辑信息和专辑歌曲
async function getAlbumSongsBy() {
    let res = await getAlbumSongs(info.albumId)
    if (res.data.code === 200) {
        info.albuminfo = res.data.album
        info.albumsong = res.data.songs
    }
}

//获取专辑动态信息,如是否收藏,收藏数,评论数,分享数
async function getAlbumDynamicBy() {
    let res = await getAlbumDynamic(info.albumId)
    if (res.data.code === 200) {
        info.albumDynamic = res.data
    }
}

//播放专辑全部音乐回调函数
async function playAllSong() {
    //添加到当前播放列表中
    music.addAllSongs(info.albumsong)
    //默认播放第一首歌
    let res = await getSongUrl(info.albumsong[0].id)
    console.log(res);
    if(res.data.code === 200){
        music.saveSongUrl(res.data.data[0].url)  //保存歌曲的播放地址
        music.SaveSongDetailAndaddHistoryPlayList(info.albumsong[0])  //保存歌曲详情信息
        music.changePlayState(true)  //修改音乐播放状态
    }
}

onMounted(() => {
    info.albumId = route.params.id
    getAlbumSongsBy()
    getAlbumDynamicBy()
})
</script>

<style lang="scss" scoped>
.album-detail {
    .singer-works {
        margin-top: 20px;

        .album-desc {}
    }
}

:deep(.el-tabs__nav-wrap::after) {
    content: none !important;
}

:deep(.el-tabs__item.is-active) {
    font-size: 20px !important;
    color: black !important;
    font-weight: 700;
}

:deep(.el-tabs__active-bar) {
    background-color: var(--mycompColor) !important;
}

:deep(.el-tabs__item:hover) {
    color: black !important;
}
</style>